<template>
  <div>
    <header>
      <el-date-picker
        v-model="month"
        type="month"
        placeholder="默认本月" @change="getRecord">
      </el-date-picker>
      
      
    </header>
    <section class="natural-rate">
      <el-table
        :data="rateRecord"
        border
        fit
        style="width: 100%">
        <el-table-column
          prop="ckfmc"
          label="客服名字">
        </el-table-column>
        <el-table-column
          prop="kfdx"
          label="底薪">
        </el-table-column>
        <el-table-column
          prop="cgcount"
          label="成功人数">
          <template slot-scope="scope">
            <router-link :to="'/data-succeed/0/' + scope.row.fcgkf + '/' + fmtDate">{{scope.row.cgcount}}</router-link>
          </template>
        </el-table-column>
        <el-table-column
          prop="rstc"
          label="人数提成">
        </el-table-column>
        <el-table-column
          prop="cgtze"
          label="成功投资额">
          <template slot-scope="scope">
            <router-link :to="'/data-succeed/1/' + scope.row.fcgkf + '/' + fmtDate">{{scope.row.cgtze}}</router-link>
          </template>
        </el-table-column>
        <el-table-column
          prop="tzetc"
          label="投资额提成">
        </el-table-column>
        <el-table-column
          prop="cgxtrs"
          label="续投人数">
          <template slot-scope="scope">
            <router-link :to="'/data-succeed/2/' + scope.row.fcgkf + '/' + fmtDate">{{scope.row.cgxtrs}}</router-link>
          </template>
        </el-table-column>
        <el-table-column
          prop="cgxtje"
          label="续投金额">
        </el-table-column>
        <el-table-column
          prop="xtetc"
          label="续投提成">
        </el-table-column>
        <el-table-column
          prop="ztje"
          label="再投金额">
        </el-table-column>
        <el-table-column
          prop="zttc"
          label="再投提成">
        </el-table-column>
        <el-table-column
          prop="fhrs"
          label="流失复活人数">
        </el-table-column>
        <el-table-column
          prop="hfrstc"
          label="流失复活提成">
        </el-table-column>
               
         <el-table-column
          prop="fhtze"
          label="流失用户复活投资额">
        </el-table-column>
        <el-table-column
          prop="hftctc"
          label="流失用户复活投资额提成">
        </el-table-column>
        <el-table-column
          prop="HJ"
          label="合计">
        </el-table-column>
      </el-table>
    </section>
     
  </div>
</template>

<script>
  import { dateFormat } from 'vux'
  export default {
    // beforeMount() {
    //   this.$emit('onCustomStyle',{
    //     border: 'none',
    //     overflowY: 'auto',
    //     background: '#f5f8fb'
    //   })
    // },
    data() {
      return {
        month: new Date(),
        rateRecord: [],
        rateRecordHf:[],
        fenzu:{
          value:'业务组',
          options:[
            {
              value:'业务组',
              label:'业务组'
            },
            {
              value:'回访组',
              label:'回访组'
            }
          ]
        }
      }
    },
    computed: {
      fmtDate() {
        return dateFormat(this.month, 'YYYY-MM-DD')
      }
    },
    activated(){
      this.customStyle()
    },
    mounted() {
      this.getRecord();
      this.customStyle()
    },
    methods: {
     
      customStyle(){
        this.$emit('onCustomStyle',{
          border: 'none',
          overflowY: 'auto',
          background: '#f5f8fb'
        })
      },
      async getRecord() {
        let newVal = this.$store.getters.getUserInfo.userGroup
        let {data} = await this.$get(
            this,{
              api: '/data/detail2.do',
              data: {
                dt1: this.fmtDate
              }
            }
          );
          if (data.state == 0) {
           this.rateRecordHf = data.content;
           
          }
        
        
      }
    }
  }
</script>

<style lang="scss" scoped>
  section{
    text-align: center;
    margin: 24px 0;
  }
</style>
